<template>
  <div class="question" v-if="info != ''">
    <van-dropdown-menu>
      <van-dropdown-item ref="city">
        <template #title>
          <div class="title">
            <span class="t1">面试宝典</span>
            <span class="t2">{{ city }}</span>
          </div>
        </template>
        <template>
          <van-index-bar>
            <div v-for="(item, index) in Object.keys(info.citys)" :key="index">
              <van-index-anchor :index="item" class="anchor"></van-index-anchor>
              <van-cell
                :title="item2"
                round
                v-for="(item2, index2) in info.citys[item]"
                :key="index2"
                @click="cellClick(item2)"
              ></van-cell>
            </div>
          </van-index-bar>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="content">
      <div class="nav">
        <van-tag
          class="tag"
          color="#f7f4f5"
          text-color="#9494a5"
          v-for="(item, index) in info.cityPositions[city]"
          :key="index"
          :class="{ active: currIndex === index }"
          @click="currIndex = index"
          >{{ item.name }}</van-tag
        >
      </div>
    </div>
    <div class="middle">
      <div class="middle-item left-top">
        <div class="circle circle1">
          <i class="iconfont">&#xe64f;</i>
        </div>
        <div class="txt">常错题库</div>
      </div>
      <div class="middle-item right-top">
        <div class="circle circle2">
          <i class="iconfont">&#xe654;</i>
        </div>
        <div class="txt">收藏题库</div>
      </div>
      <div class="middle-item left-bottom">
        <div class="circle circle3">
          <i class="iconfont">&#xe648;</i>
        </div>
        <div class="txt">企业题库</div>
      </div>
      <div class="middle-item right-bottom">
        <div class="circle circle4">
          <i class="iconfont">&#xe655;</i>
        </div>
        <div class="txt">已答题库</div>
      </div>
      <div class="middle-center">
        <van-circle
          v-model="rate"
          :rate="endRate"
          :color="gradientColor"
          :speed="50"
          :size="120 / 37.5 + 'rem'"
          layer-color="none"
          class="vanCircle"
        >
          <div class="other">
            <div class="o1">顺序刷题</div>
            <div class="o2">{{ getCollectTotal }}/{{ info.totalCount }}</div>
          </div>
        </van-circle>
      </div>
    </div>
    <div class="data">
      <div class="data1">累计收录</div>
      <div class="data2">28,887,686,000</div>
    </div>
    <div class="footer" @click="goInfo">模拟面试</div>
  </div>
</template>

<script>
import { interviewFilters } from "@/api/question.js";
import { mapGetters } from "vuex";
export default {
  name:'question',
  data() {
    return {
      city: "深圳",
      info: "",
      rate: 0,
      endRate: 30,
      gradientColor: {
        "0%": "#f49fb4",
        "100%": "#eb476e",
      },
      currIndex: 0,
    };
  },
  computed: {
    ...mapGetters(["getCollectTotal"]),
  },
  created() {
    interviewFilters().then((res) => {
      this.info = res.data.data;
      window.console.log(res);
    });
  },
  methods: {
    cellClick(str) {
      this.city = str;
      this.$refs.city.toggle();
      this.currIndex = 0;
    },
    goInfo() {
      this.$router.push(
        "/home/questionInfo?type" +
          this.info.cityPositions[this.city][this.currIndex].id +
          "&city=" +
          this.city
      );
    },
  },

 
};
</script>

<style lang="less" scoped>
.question {
  background-color: #f7f4f5;
  height: 100%;
  .title {
    .t1 {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-right: 5px;
    }
    .t2 {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      text-align: center;
      color: #545671;
      line-height: 22px;
    }
  }
  .anchor {
    background-color: #f7f4f5;
  }
  .content {
    padding: 0px 15px;
    background-color: #fff;
    .nav {
      padding: 10px 0;
      overflow-x: auto;
      display: flex;
      .tag {
        flex-shrink: 0;
        padding: 8px 10px;
        margin-right: 15px;
        border-radius: 12px;
      }
      .active {
        background-color: #00b8d4 !important;
        color: #fff !important;
      }
    }
  }
  .middle {
    height: 200px;
    margin-top: 10px;
    position: relative;
    background-color: #fff;
    .middle-item {
      width: 60px;
      position: absolute;
      text-align: center;
      .circle {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        .iconfont {
          color: #fff;
          font-size: 24px;
          line-height: 44px;
        }
      }
      .txt {
        margin-top: 6px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #545671;
        line-height: 16px;
        letter-spacing: 0px;
      }
      .circle1 {
        background-color: #ff4d4d;
      }
      .circle2 {
        background-color: #ffb602;
      }
      .circle3 {
        background-color: #00bed8;
      }
      .circle4 {
        background-color: #37dfa6;
      }
    }
    .left-top {
      left: 40px;
      top: 20px;
    }
    .right-top {
      right: 40px;
      top: 20px;
    }
    .left-bottom {
      left: 40px;
      bottom: 20px;
    }
    .right-bottom {
      right: 40px;
      bottom: 20px;
    }
    .middle-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      transform: translate(-50%, -50%);
      background: url(~@/assets/circle.png);
      background-size: 100%;
      .vanCircle {
        width: 100%;
        height: 100%;
        padding: 10px;
        .other {
          width: 100%;
          height: 100%;
          background-color: #e91649;
          border-radius: 50%;
          color: #fff;
          font-size: 16px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .o1 {
            margin-bottom: 5px;
          }
        }
      }
    }
  }
  .data {
    margin: 15px 0;
    background-color: #fff;
    font-weight: 600;
    text-align: center;
    color: #545671;
    padding: 21px 0;
    .data1 {
      font-size: 18px;
      line-height: 25px;
    }
    .data2 {
      padding-top: 21px;
      font-size: 30px;
      line-height: 42px;
    }
  }
  .footer {
    margin: 15px;
    width: 345px;
    height: 50px;
    background: #00b8d4;
    border-radius: 14px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    line-height: 50px;
  }
}
</style>